import zhCN from "antd/es/locale/zh_CN";
import "dayjs/locale/zh-cn";
import { getDataLocal } from "@/store/";
import { useState, useEffect } from "react";
import { Spin, ConfigProvider } from "antd";
import TaskTable from "@/template/task_table";
import TaskAdd from "@/template/task_add";
import { ReceiveData, TaskTableType } from "@/store/interface";


function App() {
  const [data, setData] = useState<ReceiveData>({
    site: "",
    ajaxurl: "",
    data: [{}] as [TaskTableType], // 可以使用 TaskTableType 数组初始化
    table_task_name: "",
    table_submit_name: "",
  });
  const [loading, setLoading] = useState(true); // 添加loading状态

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await getDataLocal();
        setData(response); // 假设getDataLocal返回的数据是一个对象
      } catch (error) {
        console.error("数据获取失败", error);
      } finally {
        setLoading(false); // 数据加载完成后设置loading为false
      }
    };

    fetchData();
  }, []);

  return (
    <ConfigProvider locale={zhCN}>
      <div>
        {loading ? (
          <Spin tip="加载中..." /> // 显示加载中提示
        ) : (
          <div>
            <p>Site: {data.site}</p>
            <p>Ajax URL: {data.ajaxurl}</p>
            <p>Table Task Name: {data.table_task_name}</p>
            <p>Table Submit Name: {data.table_submit_name}</p>
            {/* 如果需要显示整个对象，可以这样： */}
            <p>Data: {JSON.stringify(data.data)}</p>
            <h2>添加任务</h2>
            <TaskAdd />
            <h2>展示任务</h2>
            <TaskTable data={data.data} />
          </div>
        )}
      </div>
    </ConfigProvider>
  );
}

export default App;
